<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>乘梯记录</title>
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .top{
        width:100%;
        margin-top: 20px;
    }
    .top .text-check{
        font-size:14px;
        display: inline-block;
    }
    .chose{
        color:#888;
        margin-left: 10px;
        display: inline-block;
    }
    .layui-inline{
        margin-left:8px;
        display: inline-block;
    }
    .layui-input-inline{
        width:120px;
        display: inline-block;
    }
    .layui-form-label{
        width:32px;
        padding:2px 10px 5px 4px;
        border:1px solid #888;
        border-right:none;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
    }
    .layui-input{
        height:29px;
        width:120px;
        border:1px solid #888;
        border-left:none;
        outline:none;
        font-size: 14px;
        border-top-left-radius:0;
        border-bottom-left-radius:0;
        border-top-right-radius:5px;
        border-bottom-right-radius:5px;
        display: inline-block;
    }
    .layui-btn,.layui-btn-outer{
        color:white;
        border:0;
        height:28px;
        line-height: 28px;
        font-size:14px;
        outline: none;
        border-radius:5px;
        display: inline-block;
        background-color: #EF7632;
    }
    .layui-btn{
        width:92px;
    }
    .layui-btn-outer{
        width:160px;
        margin-left:40px;
    }
    /* table部分 */
    .detail{
        height:600px;
    }
    .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th{
        background-color:#fff;
    }
    /* 分页 */
    #page-num{
        display: inline-block;
    }
    .layui-laypage a, .layui-laypage span{
        border:none;
        border-radius:30px;
        text-align: center;
        width: 20px;
        height: 20px;
        line-height:20px;
        padding:0;
        margin-left:3px;
    }
    .layui-laypage>:first-child, .layui-laypage>:first-child em{
        border-radius:30px;
    }
    .layui-laypage>:last-child, .layui-laypage>:last-child em{
        border-radius:30px;
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em{
        border-radius:30px;
        background-color: #EF7632;
    }
    #page-fen{
        display: inline-block;
        float: right;
    }
    #page-counter{
        display: inline-block;
    }
    #page-num{
        display: inline-block;
        margin-left:15px;
        margin-right:30px;
    }
    .goBack{
        margin-left: 20px;
    }
</style>
<body>
<div class="container-one">
    <div class="top">
        <p class=text-check>查看消费类型</p>
        <form class="layui-form layui-form-pane chose" >
            <input type="radio" name="items" value="chengti" title="乘梯" checked>
        </form>
        <!-- 日期 -->

        <div class="layui-inline">
            <label class="layui-form-label">日期</label><div class="layui-input-inline">
            <input type="text" class="layui-input layui-date" placeholder="" id="start">
        </div>
        </div>

        <span>至</span>

        <div class="layui-inline">
            <label class="layui-form-label">日期</label><div class="layui-input-inline">
            <input type="text" class="layui-input layui-date" placeholder=""  id="end">
        </div>
        </div>

        <button class="layui-btn" id="search" lay-submit=""><span class="iconfont icon-sousuokuang"></span>&emsp;搜&nbsp;索</button>
       <!-- <button class="layui-btn-outer" lay-submit="">导出本次查询数据</button>-->
        <a  onClick="javascript:window.history.back(-1);" class="goBack"><span class="iconfont icon-fanhui">&nbsp;返回</span></a>
    </div>

<!--  表格 -->
<div class="detail">
    <table class="layui-table" lay-skin="line">
        <thead >
        <tr>
            <th>编&emsp;号</th>
            <th>小&emsp;区</th>
            <th>单&emsp;元</th>
            <th>时&emsp;间</th>
            <th>消费类型</th>
            <th>消费金额</th>
        </tr>
        </thead>
        <tbody class="org-table">
        </tbody>
    </table>
    <div id="page-fen">
        <div id="page-num"></div>
    </div>
  </div>
</div>
<!--  表格部分 -->
<script src="../lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="../lib/js/jquery.cookie.js" type="text/javascript"></script>
<script>
    layui.use(['jquery', 'laydate','form','laypage','layer'], function(){
        var  $ = layui.jquery;
        var   laydate = layui.laydate;
        var   laypage = layui.laypage;

        var table_Idb =localStorage.getItem("table_Idb");

        var params = {};
        params.table_Idb = table_Idb;
        var start = {
            min: '2000-06-16 23:59:59'
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: '2000-06-16 23:59:59'
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('start').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('end').onclick = function(){
            end.elem = this;
            laydate(end);
        }
//以上公共部分
        $("#search").off("click").on("click",function(){
            searchCT();
        });
        var pages = {};
        //乘梯
        searchCT();
        function searchCT(curr){

            var startDate =$("#start").val();
            startDate = startDate.replace(/-/g, '');

            var endDate =$("#end").val();
            endDate = endDate.replace(/-/g, '');

            $.ajax({
                url: '../../organization_manage/getChengtiDetails',
                type: 'get',
                dataType: 'json',
                data:{
                    user_id:table_Idb,
                    current_page: curr || 1,
                    limit:10,
                    start_date:startDate||0,
                    end_date:endDate||0,
                    type:0
                }
            })
                .done(function(response){
                    console.log("getFlowDetails success",response);

                    if(response.resultCode == '200'){

                        var str= '';
                        console.log(response.page.list.length);

                        if(response.page.list.length){
                            for(var i=0;i<response.page.list.length;i++){
                                str +=
                                    '<tr>'+
                                    '<td>'+ response.page.list[i].flow_id +'</td>'+
                                    '<td>'+ response.page.list[i].building_name +'</td>'+
                                    '<td>'+ response.page.list[i].zhuang_danyuan+'</td>'+
                                    '<td>'+ response.page.list[i].consume_time+'</td>'+
                                    '<td>'+ response.page.list[i].consume_type+'</td>'+
                                    '<td>'+ response.page.list[i].consume_money+'</td>'+
                                    '</tr>'
                            }

                            $(".org-table").html(str);
                            //分页显示
                            pages.total = response.page.total;
                            console.log("总条数",pages.total);

                            pages.current_page = response.page.current_page;
                            console.log("当前页",pages.current_page);

                            pages.totalPages = Math.ceil(pages.total/10);
                            console.log("总页数",pages.totalPages);

                            laypage({
                                cont: 'page-num'
                                ,pages: pages.totalPages
                                ,curr: pages.current_page
                                ,first: 1
                                ,last:false
                                ,prev: '<em><</em>'
                                ,next: '<em>></em>'
                                ,jump: function(obj, first){ //触发分页后的回调
                                    var curr = obj.curr;
                                    console.log(curr);
                                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                        searchCT(curr);
                                    }
                                }
                            });

                        }else{
                            str = '<tr><td colspan="7">暂无数据</td></tr>';
                            $(".org-table").html(str);
                        }
                    }
                })
                .fail(function(response){
                    console.log("fail",response);
                    if(response.resultCode=='001'){
                        console.log("param is not found");
                    }
                });
        }
    });
</script>
</body>
</html>
